<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meat content="width=device-width , initial-scale=1.0 , maximum-scale=1.0 , user-scalable=0;" name="viewport"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王宣，情人节快乐</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="content">
        <h1 class="title">王宣，情人节快乐</h1>
        <div class="box">
            <div class="pic">
				<ul>
					<li><img src="./image/ta1.png" width="" height="" alt=""/></li>
					<li><img src="./image/ta2.png" width="" height="" alt=""/></li>
					<li><img src="./image/ta3.png" width="" height="" alt=""/></li>
					<li><img src="./image/ta4.png" width="" height="" alt=""/></li>
					<li><img src="./image/ta5.png" width="" height="" alt=""/></li>
					<li><img src="./image/ta6.png" width="" height="" alt=""/></li>
				</ul>
			</div>
        </div>
        <div id="text" class="text-style">
            <!-- 能够遇见你是我最大的幸运，有了你生活变得丰富多彩，有了你，世界变得如此迷人；你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你后都是最美好的时光！ -->
            
        </div>
    </div>
    <audio autoplay="autoplay" loop="loop" src="./shijienamedahaishiyujianni.mp3"></audio>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/snow.js"></script>
    <script>
        $(".pic ul li").each(function(i){//遍历
            var deg=360/$(".pic ul li").size();//size个数
            //当前的li对象 添加css样式
            $(this).css({"transform":"rotateY("+deg*i+"deg) translateZ(216px)"});
            $.fn.snow({
                minSize:10,
                maxSize:15,
                newOn:500,
                flakeColor:"#ffffff"
            });
        });
        var i=0;
                
        var str="你的过去我来不及参与，你的未来我不会再错过!真诚之中，与你相识相知;灵犀之间，与你朝夕相伴。情人节快乐！！";
        
        window.onload=function typing(){
            //获取div
            var mydiv=document.getElementById("text");
            mydiv.innerHTML+=str.charAt(i);
            i++;
            var id=setTimeout(typing,300);
            if(i==str.length){
                mydiv.innerHTML += `
                <h2 class='date'>郑文旭</h2>
                <h2 class='date'>2020年2月14日</h2>    
                `;
                clearTimeout(id);
            }
        }
    </script>
</body>
</html>